<template>
  <div class="box">
    <header>
      <van-icon name="arrow-left" @click="goBack" size="2rem" />
      <van-icon name="ellipsis" size="2rem" />
    </header>
    <GoodsInfoVue></GoodsInfoVue>

    <van-cell class="send" title="送至" is-link value="浙江省 杭州市" />
    <div class="like">
      <h3>猜你喜欢</h3>
      <DetailVue></DetailVue>
    </div>
    <footer>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          @click="onClickIcon"
        />
        <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
        <van-goods-action-button
          type="danger"
          text="立即购买"
          @click="onClickButton"
        />
      </van-goods-action>
    </footer>
  </div>
</template>

<script>
// import axios from "axios";
import { Toast } from "vant";
import DetailVue from "@/components/Detail.vue";
import GoodsInfoVue from "@/components/GoodsInfo.vue";
export default {
  name: "GoodsDetail",
  components: {
    DetailVue,
    GoodsInfoVue,
  },
  data() {
    return {
      goods: {},
      comments: [],
    };
  },
  created() {
    let proid = this.$route.params.goodsid;

    this.$service.get("api/pro/detail/" + proid).then((res) => {
      if (res.data.code == 200) {
        console.log("商品详情：", res.data.data);
        this.goods = res.data.data;
      }
    });

    // let  getComments =()=>{
    //     return this.$service.get("/comments",{
    //         params:{
    //             goodsid:"01001"
    //         }
    //     });
    // }

    // this.$service.all([getGoodsDetail(),getComments()])
    // .then(this.$service.spread((detailRes,commoentsRes)=>{
    //     this.goods = detailRes.data[0];
    //     this.comments = commoentsRes.data;
    // }))
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    onClickIcon() {
      Toast("点击图标");
    },
    onClickButton() {
      Toast("点击按钮");
    },
  },
};
</script>

<style scoped>
.box {
  background-color: #efefef;
  height: 100%;
  width: 100%;
}
header {
  position: fixed;
  width: 100%;
  top: 1px;
  left: 0 px;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.5rem 0 0.1rem;
  box-sizing: border-box;
  z-index: 100;
}
footer {
  position: fixed;
  bottom: 1px;
  left: 0px;
}
.send {
  margin: 1rem 0;
}
.like {
  background-color: #fff;
}
h3 {
  margin-left: 1rem;
}
</style>